import { ContactEdit } from 'vant';

<template>
  <div class="buyrecordlist">
    <van-nav-bar
      fixed
      left-text="返回"
      left-arrow
      :title="!isWeixin() ? '购买记录' : ''"
      @click-left="handleBack"
    />
    <div class="inner">
      <div class="pageLoading" v-if="pageLoading">
        <van-loading type="spinner" vertical>加载中...</van-loading>
      </div>
      <div class="have" v-if="!pageLoading && list.length">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="have-item"
            v-for="(item, index) in list"
            :key="item"
            @click="handleGodetail(item)"
          >
            <div class="refund">
              <div class="clumns between">
                <div class="text">最新优质商机</div>
                <div class="text">
                  <span v-if="item.status === 1">已付款 </span>
                  <span v-if="item.status === 2">已到账 </span>
                  <span v-if="item.status === 3">申请中 </span>
                  <span v-if="item.status === 4">已退款 </span>
                  <span v-if="item.status === 5">拒绝退款 </span>
                </div>
              </div>
              <div class="clumns">
                <div class="text">{{ item.title }}</div>
              </div>
              <div class="clumns">
                <div class="text">
                  申请时间：{{
                    dayjs.unix(item.addtime).format("YYYY-MM-DD HH:mm:ss")
                  }}
                </div>
              </div>
            </div>
            <!-- <div class="item-top">
                            <div class="clumns">
                                <div class="text">转单信息：安徽合肥买一台5吨行车</div>
                            </div>
                            <div class="clumns">
                                <div class="text">
                                    转单需求：我在安徽合肥，工厂需要采购一台5吨行车
                                </div>
                            </div>
                            <div class="clumns">
                                <div class="text">转单时间：2024-1-8 12:59:00</div>
                            </div>
                            <div class="clumns">
                                <div class="text w-50">客户姓名：张先生</div>
                                <div class="text w-50">
                                    客户电话：<span class="bluecolor">13524918667</span>
                                </div>
                            </div>
                        </div> -->
            <div class="item-footer">
              <div class="phone">
                电话：{{ item.phone || "-" }}
                <div
                  @click.stop="handleCallPhone(item)"
                  class="bluecolor boda"
                  v-if="item.phone"
                >
                  <van-icon color="#1989fa" name="phone-o" />拨打电话
                </div>
              </div>

              <!-- <div class="action">
                                <van-space v-if="item.status === 1 || item.status === 2 || item.status === 5">
                                    <van-button type="primary" size="small" @click="handleSq(item)">申请退款</van-button>

                                </van-space>
                            </div> -->
            </div>
          </div>
        </van-list>
      </div>
      <div class="none" v-if="!pageLoading && !list.length">
        <van-empty description="暂无记录" />
      </div>
    </div>
    <van-dialog
      v-model:show="showDialog"
      title="申请退款"
      show-cancel-button
      @confirm="handleConfirm"
      @cancle="handleCancle"
    >
      <div>
        <van-cell-group inset>
          <van-field
            v-model="message"
            rows="3"
            autosize
            label="退款原因:"
            type="textarea"
            placeholder="请输入"
          />
        </van-cell-group>
      </div>
    </van-dialog>
  </div>
</template>
<script setup lang="ts">
import { getCookie } from "@/utils/index";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { isWeixin } from "@/utils/index";
import { procurebuysApi, procuresqtkApi } from "@/api/user";
import { showLoadingToast, showToast, showConfirmDialog } from "vant";
import dayjs from "dayjs";
const router = useRouter();
const list = ref();
const showDialog = ref(false);
const message = ref("");
const currentItem = ref<any>("");
const pageLoading = ref(false);
const finished = ref(false);
const loading = ref(false);

const pagination = reactive({
  pageNo: 1,
  pageSize: 10,
});
const handleBack = () => {
  if (history.state?.back) {
    router.back();
  } else {
    router.push("/user");
  }
};
const getList = async () => {
  pageLoading.value = true;
  let { data } = await procurebuysApi({
    uid: getCookie("token") ? Number(getCookie("token")) : "",
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
  });
  list.value = data.data || [];
  if (data.totalPage === 1) {
    finished.value = true;
  }
  pageLoading.value = false;
};
getList();
const onLoad = async () => {
  pagination.pageNo++;
  let { data } = await procurebuysApi({
    uid: getCookie("token") ? Number(getCookie("token")) : "",
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
  });
  loading.value = false;
  list.value = [...list.value, ...data.data];
  if (pagination.pageNo >= data.totalPage) {
    finished.value = true;
  }
};
const handleGodetail = (data: any) => {
  router.push(`/detail/${data.id}`);
};
const handleCallPhone = (phone: any) => {
  const a = document.createElement("a");
  a.href = `tel:${phone}`;
  a.click();
};
const handleSq = async (data: any) => {
  // showDialog.value = true
  // currentItem.value = data
  showConfirmDialog({
    title: "申请退款",
    message: "确认申请退款吗？",
  })
    .then(async () => {
      // on confirm
      let toast = showLoadingToast({
        message: "请稍等...",
        forbidClick: true,
        duration: 0,
      });
      let { code, msg } = await procuresqtkApi({ procureorderid: data.id });
      toast.close();
      if (code === 0) {
        getList();
      } else {
        showToast({
          message: msg,
          position: "top",
        });
      }
    })
    .catch(() => {
      // on cancel
    });
};
const handleConfirm = async () => {
  handleCancle();
  let toast = showLoadingToast({
    message: "申请中...",
    forbidClick: true,
    duration: 0,
  });
  let { code, msg } = await procuresqtkApi({
    procureorderid: currentItem.value.id,
  });
  toast.close();
  if (code === 0) {
    getList();
  } else {
    showToast({
      message: msg,
      position: "top",
    });
  }
};
const handleCancle = () => {
  message.value = "";
  showDialog.value = false;
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
